<template>
	<view class="u-page">
		<!-- 所有内容的容器 -->
		<view class="title"><text class="title_child">卫生管理监督系统</text></view>
		<!-- 登录表单 -->
		<u-form :model="form" ref="uForm" label-width="120rpx" label-align="center">
			<u-form-item label="学号" prop="stuId" borderBottom>
				<u--input v-model="form.stuId" :focus="true" :clearable="false" placeholder="请输入学号" maxlength="10"
					type="number" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="form.password" placeholder="请输入密码" :password-icon="false"
					maxlength="10" type="text" password border="none"></u--input>
			</u-form-item>
		</u-form>
		<view class="back" @click="backPassword">找回密码</view>
		<view class="btn">
			<view class="btn_0">
				<u-button type="primary" @click="addNember" shape="circle" size="normal" text="注册"></u-button>
			</view>
			<view class="btn_1">
				<u-button type="primary" @click="submit" shape="circle" size="normal" text="登录"></u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					stuId: '1802101021',
					password: '12345678'
				},
				rules: {
					stuId: [{
							required: true,
							message: '请输入学号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'blur',
						},
						{
							pattern: /^[12][0-9]{7}[0-6][0-9]$/,
							message: '该学号不存在',
							trigger: 'blur',
						}
					],
					password: [{
							required: true,
							min: 6,
							max: 10,
							message: '请输入密码,6-10位',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '密码只能为数字或字母',
							trigger: 'blur'
						}
					],
				},
			}
		},
		methods: {
      backPassword() {
        uni.navigateTo({
          url: './backPassword'
        })
      },
	  addNember() {
        uni.navigateTo({
          url: './addNember'
        })
      }
    },
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// setRules 调用此方法，设置校验规则
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.u-page {
		margin: 0;
		padding: 0;
		height: 100vh;
		/* background-color: #7eb6f854; */
		background-image: linear-gradient(to bottom right, #7a88ff, #7affaf);
		font-size: 60rpx;
	}

	/* 标题区域 */
	.title {
		width: 100%;
		height: 400rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}

	.title_child {
		display: inline-block;
		height: 80rpx;
		line-height: 400rpx;
		width: 480rpx;
		font-size: 60rpx;
	}

	/* 表单区域 */
	.u-form {
		width: 70%;
		margin: 0 15%;
	}

	.u-form-item {
		background-color: #fff;
		border-radius: 60rpx;
		margin-bottom: 20rpx;
	}

	/* 找回密码区域 */
	.back {
		display: flex;
		justify-content: flex-end;
		margin-right: 100rpx;
		font-size: 30rpx;
	}

	/* 按钮 */
	.btn {
		display: flex;
		margin-top: 30rpx;
		/* width: 100%; */
		/* margin: 0rpx auto; */
	}

	.btn_0 {
		width: 200rpx;
		height: 120rpx;
		margin-left: 20%;
		/* margin-left: 100rpx; */
		/* padding: 10rpx; */
	}

	.btn_1 {
		width: 200rpx;
		height: 120rpx;
		margin-left: auto;
		margin-right: 20%;
		/* margin-left: 70rpx; */
	}

	/* .u-form-item--left__content__label {
		padding-left: 20rpx;
	} */
</style>
